<template>
  <div class="home-page">
    <div class="home-title">
      Please select a recharge method
    </div>
    <div class="card-content">
      <div class="card-name">
        Current Quota
      </div>
      <el-row :gutter="16">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="col1">
          <div class="card card1">
            <div class="value-num">
              {{ detail.token }}
            </div>
            <div class="value-desc">
              AskJina Tokens
            </div>
            <el-button type="primary" class="buy-button" @click="dialogShow = true">
              Buy AskJina Tokens
            </el-button>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="card card2 f-c j-b">
            <div class="f-r a-c j-b">
              <div class="card-desc">
                <div class="card-desc-name">Auto-recharging (coming soon)</div>
                <div class="card-desc-value">When the Askjina Token runs out, AskJina API will stop functioning.</div>
              </div>
              <el-switch
                  style="margin-top: 14px"
                  @click="changeAuto"
                v-model="detail.auto"
                :active-value="1"
                :inactive-value="0"
                active-color="#4F4EF1"
                inactive-color="#ff4949">
              </el-switch>
            </div>
            <div style="width: 100%">
              <el-row :gutter="16">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-button style="width: 100%;opacity: 0.3;cursor: not-allowed" type="primary" plain>Confgure Auto-Recharge</el-button>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-button style="width: 100%;opacity: 0.3;cursor: not-allowed" type="primary" plain >Manage Payment Method</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="card-name">
        History
      </div>
      <div class="card card3">
        <div class="table">
          <div class="table-header">
            <el-row :gutter="16">
              <el-col :span="8">
                <div class="th">
                  <span>Askiina Tokens</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="th">
                  <span>Activity</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="th">
                  <span>Date</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="table-body" v-loading="pagination.loading">
            <div class="table-row" v-for="item in list">
              <el-row :gutter="16">
                <el-col :span="8">
                  <div class="td">
                    <span> {{ item.name }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="td">
                    <span>{{ item.tokens }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="td">
                    <span>{{ item.create_time }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="empty" v-if="list.length === 0">
              <img src="@/assets/空页面.png" alt="">
              <div class="text">There is no top-up record</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination" style="padding: 20px 0;text-align: center;display: flex;justify-content: center">
        <el-pagination
            background
            v-model:current-page="pagination.pageNum"
            :page-size="pagination.pageSize"
            layout="total, prev, pager,next,sizes"
            :page-sizes="[10, 50, 100]"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <div class="logout-icon" @click="logout">
    <img src="@/assets/退出.png" alt="">
    <span>Exit</span>
  </div>
  <el-dialog v-model="dialogShow" :width="dialogWidth">
    <div class="dialog-box">
      <div class="dialog-title">Please select a top-up package</div>
      <div class="dialog-list">
        <el-row :gutter="16">
          <el-col :span="12" v-for="(item,index) in usdList">
            <div
                @click="activeUsd = item.usd"
                :class="['dialog-item', 'dialog-item' + index, item.usd === activeUsd ? 'active' : '']">
              <div class="dialog-item-top">
                <span class="value">{{ item.value }}</span>
                <span class="name">AskJina Tokens</span>
                <div class="dialog-item-select">
                  <el-icon color="#fff"><Select /></el-icon>
                </div>
              </div>
              <div class="usd">USD {{ item.usd }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="dialog-button">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-button type="primary" plain @click="dialogShow = false">Cancel</el-button>
          </el-col>
          <el-col :span="12">
            <el-button v-loading="isLoading" type="primary" @click="confirmUsd" :disabled="activeUsd === 0">Top Up NoW</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
  <div id="payment-element"/>
</template>
<script setup>
import {loadStripe} from '@stripe/stripe-js';
import { Select } from '@element-plus/icons-vue'
import {onMounted, ref, toRaw} from "vue";
import { useRouter } from "vue-router";
import {http} from "@/api";
const router = useRouter()
import { useStore } from "vuex";
import {ElMessage} from "element-plus";
import axios from "axios";
const logout = () => {
  store.commit('logout')
}
const detail = ref({
  token: 0,
  auto: 0
})
const getUserInfo = () => {
  http.getUserInfo(store.getters.userInfo.id).then(res => {
    detail.value = res.data
  })
}
const changeAuto = () => {
  http.updateUserInfo(store.getters.userInfo.id, { auto: detail.value.auto }).then(res => {
    if (res.code !== 200) {
      detail.value.auto = detail.value.auto === 0 ? 1 : 0
      ElMessage.error('failed')
    } else {
      ElMessage.success('success')
    }
  })
}
const list = ref([

])
const activeUsd = ref(0)
const usdList = ref([
  {
    value: '1,000',
    number: 1000,
    usd: 10
  },
  {
    value: '1,0000',
    number: 10000,
    usd: 20
  },
  {
    value: '1,00000',
    number: 100000,
    usd: 30
  },
  {
    value: '1,000000',
    number: 1000000,
    usd: 60
  }
])
let dialogShow = ref(false)
const isLoading = ref(false)

/**
 * 支付
 */
const store = useStore()
const stripe = ref(null)
const elements = ref(null)
let cardElement = ref(null)
const initStripe = async () => {
  stripe.value = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
  elements.value = stripe.value.elements({
    theme: 'stripe',
    locale:'auto'
  });
  cardElement.value = elements.value.create('card', {});
  cardElement.value.mount("#payment-element");
}
const toPay = async () => {
  const payload = await stripe.value.createPaymentMethod({
    type: 'card',
    card: cardElement.value,
  });
  console.log('[PaymentMethod]', payload);
}
const confirmUsd = () => {
  isLoading.value = true
  toPay()
  http.createRecharge({
    tokens: usdList.value.find(item => item.usd === activeUsd.value).number,
    name: 'Top-up',
    amount: activeUsd.value,
    user_id: store.getters.userInfo.id
  }).then(res => {
    if (res.code === 200) {
      dialogShow.value = false
      ElMessage.success('success')
      getList()
      getUserInfo()
    } else {
      ElMessage.error('failed')
    }
  }).finally(() => {
    isLoading.value = false
  })
}
const pagination = ref({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  total: 0,
  size: 'small'
})
const handleSizeChange = (val) => {
  pagination.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  pagination.pageNum = val
  getList()
}
const getList = () => {
  pagination.value.loading = true
  http.getRechargeRecord({
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
  }).then(res => {
    list.value = res.data.rows
    pagination.value.total = res.data.count
  }).finally(() => {
    pagination.value.loading = false
  })
}
const dialogWidth = ref('700px')

onMounted(() => {
  initStripe()
  getUserInfo()
  getList()
  // 当前设备小于768px时，设置dialog宽度为100%
  if (document.body.clientWidth < 768) {
    dialogWidth.value = '85%'
  }
})
</script>
<style lang="scss">

.el-dialog__header {
  display: none;
}
.el-dialog {
  background-color: rgb(242,243,248);
  padding: 0;
  box-shadow: none;
  border-radius: 14px;
}
.dialog-box {
  padding:48px;
  width: 100%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  .dialog-button {
    margin-top: 24px;
    .el-button {
      width: 100%;
    }
  }
  .dialog-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 40px;
  }
  .dialog-item {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    height: 200px;
    background-image: url("~@/assets/充值1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    .dialog-item-top {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .value {
        font-size: 24px;
        font-weight: bold;
        color:var(--primary-text-color);
      }
      .name {
        font-size: 18px;
        color: #666;
        margin: 5px 0;
      }
    }
    .usd {
      height: 48px;
      line-height: 35px;
      text-align: center;
      font-size: 18px;
      color: #999;
    }
  }
  .dialog-item0 {
    background-image: url("~@/assets/充值1.png");
  }
  .dialog-item1 {
    background-image: url("~@/assets/充值2.png");
  }
  .dialog-item2 {
    background-image: url("~@/assets/充值3.png");
  }
  .dialog-item3 {
    background-image: url("~@/assets/充值4.png");
  }
  .dialog-item.active {
    border-color:var(--primary-color);
  }
  .dialog-item .dialog-item-select {
    display: none;
  }
  .dialog-item.active .dialog-item-select {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 44px;
    height: 41px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 18px;
    background-color:var(--primary-color) ;
    .el-icon {
      font-size: 18px;
    }
  }
}
.home-page {
  height: 100%;
  background-color: rgb(242,243,248);
  display: flex;
  flex-direction: column;
  .home-title {
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    padding: 6vh 0 0 0;
  }
  .card-content {
    width: 70%;
    margin: 20px auto;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .buy-button {
      width: 60%;
    }
    .card-name {
      line-height: 20px;
      font-size: 20px;
      color: #666;
      margin: 40px 0;
    }
    .card {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
      border-radius: 14px;
      padding: 50px 40px;
    }
    .card2 {
      .card-desc-name {
        font-size: 24px;
        line-height: 40px;
        font-weight: 700;
        color: #000000;
      }
      .card-desc-value {
        font-size: 16px;
        color: #000000;
        opacity: 0.5;
      }
    }
    .card3 {
      flex-grow: 1;
      padding: 0;
      display: flex;
      flex-direction: column;
      border-radius: 14px;
      overflow: hidden;
    }
    .table {
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 14px;
      .el-row {
        height: 100%;
      }
      .th,
      .td {
        height: 100%;
        text-align: center;
        line-height: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .th {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      .td {
        font-size: 16px;
        color: #666666;
        font-weight: bold;
      }
      .table-header {
        flex-shrink: 0;
        background-image: url("~@/assets/历史记录渐变.png");
        background-repeat: no-repeat;
        background-size: cover;
        height: 65px;
      }
      .table-body {
        flex-grow: 1;
        overflow: auto;
        padding: 0 40px;
        .table-row {
          height: 65px;
          border-bottom: 1px solid #f0f0f0
        }
        .empty {
          height: 100%;
          width: 100%;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img {
            width: 140px;
            height: 140px;
          }
          .text {
            padding-top: 10px;
            font-size: 16px;
            color: #333333;
            text-align: center;
          }
        }
      }
    }
    .card1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .value-num {
        font-size: 32px;
        font-weight: bold;
        color: var(--primary-text-color);
      }
      .value-desc {
        font-size: 24px;
        color: #000;
        margin: 30px 0 35px 0;
      }

    }
  }
}
.home-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.logout-icon {
  position: fixed;
  top: 30px;
  right: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
  img {
    width: 28px;
  }
  span {
    margin-left: 10px;
    font-size: 20px;
    color: #000000;
  }
}
@media (max-width: 768px) {
  .logout-icon {
    display: none;
  }

  .home-page {
    background-image: url("~@/assets/h5_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .pagination {
      display: none !important;
    }
    .home-title {
      font-size: 30px;
      font-weight: initial;
      padding: 30px 20px 0 20px;
    }
    .card-content {
      width: 100%;
      margin: 0;
      padding: 16px 20px;
      overflow: auto;
      .card {
        padding:30px 20px;
      }
      .card-name {
        margin: 20px 0;
      }
      .buy-button {
        width: 100%;
      }
      .col1 {
        margin-bottom: 20px;
      }
      .card1 {
        .value-desc {
          margin: 15px 0 20px 0;
          font-size: 16px;
          color: #666666;
        }
      }
      .card2 {
        .el-button {
          margin-top: 24px;
        }
      }
      .card-desc {
        .card-desc-name {
          font-size: 20px;
          line-height: 30px;
          font-weight: initial;
        }
      }
      .card3 {
        height: 100%;
        overflow: initial;
        padding: 0;
      }
      .table {
        overflow: hidden;
        .table-body {
          padding: 0;
          overflow-x: hidden;
        }
        .th {
          padding: 0 20px;
        }
        .th,
        .td{
          height: 100%;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
          font-size: 16px;
        }
        .td {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
  .dialog-box {
    padding: 20px;
    .dialog-title {
      font-size: 18px;
      padding-bottom: 24px;
      padding-left: 10px;
      padding-right: 10px;
    }
    .dialog-item {
      border-radius: 6px;
      height: 120px;
      .dialog-item-top {
        .value {
          font-size: 18px;
        }
        .name {
          font-size: 14px;
        }
      }
      .usd {
        height: 33px;
        line-height: 33px;
        font-size: 14px;
      }
    }
    .dialog-item.active .dialog-item-select{
      width: 28px;
      height: 28px;
      .el-icon {
        font-size: 14px;
      }
    }
    .dialog-button {
      margin-top: 10px;
    }
  }
}
</style>
